import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import {
  ProFormText,
  ProFormRadio,
  ProFormDateTimePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import { request } from 'umi';
import '../leave/leave.less';
export default function applyLeave(props) {
  // 流程单号
  const [anumber, setAnumber] = useState('');
  // 员工名称
  const [aname, setAname] = useState('张研');
  // 员工部门
  const [department, setDepartment] = useState('总经办');
  // 员工岗位
  const [prodepartment, setProdepartment] = useState('总经理');
  // 备注
  const [technological, setTechnological] = useState('');
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 加班时长
  const [timeday, setTimeday] = useState('');
  // 申请时间
  const [applyTime, setCancellationTime] = useState(getFormatDate(new Date()));
  // 开始时间
  const [startTime, setStartTime] = useState('');
  // 结束时间
  const [endTime, setEndTime] = useState('');
  // 提示文字
  const [keyWord, setKeyWord] = useState('');
  // 取消弹框
  const handleCancel = () => {
    props.history.push('/person/overtime')

    setIsModalOpen(false);
  };
  const ModalFalse = () => {
   

    setIsModalOpen(false);
  };
  // 标准时间
  function getFormatDate(defaultdate: any) {
    let date = defaultdate;
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    let currentDate =
      year +
      '-' +
      month +
      '-' +
      day +
      ' ' +
      hour +
      ':' +
      minutes +
      ':' +
      seconds;
    return currentDate;
  }
  // 点击保存
  const applySubmit = () => {
    if (!startTime) {
      setIsModalOpen(true);
      setKeyWord('开始时间');
    } else if (!endTime) {
      setIsModalOpen(true);
      setKeyWord('结束时间');
    } else {
      const number = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'G',
        'K',
        'U',
        'V',
        'W',
        'R',
        'S',
        'T',
        'O',
        'P',
        'Q',
        'N',
        'M',
        'Z',
        'X',
        'Y',
        'J',
      ];
      const math = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      let num = '';
      for (let a = 0; a <= 4; a++) {
        num += number[Math.ceil(Math.random() * 25)];
      }
      num += String(new Date()).split(' ')[3];
      for (let a = 0; a <= 3; a++) {
        num += math[Math.ceil(Math.random() * 9)];
      }
      setAnumber(num);
      const end = Number(String(endTime).split(' ')[2]);
      const start = Number(String(startTime).split(' ')[2]);
      const eh = Number(String(endTime).split(' ')[4].split(':')[0]);
      const sh = Number(String(startTime).split(' ')[4].split(':')[0]);
      const day: any = end - start;
      const h: any = eh - sh;
      const starts: any = getFormatDate(startTime);
      const ends: any = getFormatDate(endTime);
      setStartTime(starts);
      setEndTime(ends);
      var d: any = '';
      if (h > 0 && day > 0) {
        d += day + '天' + h + '小时';
      } else if (h > 0 && day === 0) {
        d += h + '小时';
      } else if (h === 0 && day > 0) {
        d += day + '天';
      }
      setTimeday(d);
      const body = {
        aname,
        department,
        prodepartment,
        anumber: num,
        startTime: starts,
        endTime: ends,
        applyTime,
        technological,
        timeday: d,
        dtype: '加班',
        status: '未提交',
      };
      request('/api/ljf/overtimeLeave', {
        method: 'post',
        data: body,
      }).then((res: any) => {
        if (res.code === 200) {
          setIsModalOpen(true);
          setKeyWord('保存数据成功');
        }
      });
    }
  };
  return (
    <div className="applyLeave">
      <div className="applyleave">
        <button
          onClick={() => {
            applySubmit();
          }}
        >
          保存
        </button>
        <button>保存且新增</button>
        <button>草稿箱</button>
        <button>提交审批</button>
        <button>流程图</button>
        <button>导入</button>
      </div>
      <div className="applyLeaveContent applyLeaveContent0">
        <h1>加班申请单</h1>
        <table className="table">
          <tbody>
            <tr>
              <td>单据编号：</td>
              <td>
                <ProFormText
                  width="md"
                  name="anumber"
                  disabled
                  placeholder={'保存后自动生成'}
                  value={anumber}
                  onChange={(e: any) => {
                    setAnumber(e.target.value);
                  }}
                />
              </td>
              <td>
                <span>*</span> 员工姓名：
              </td>
              <td>
                <ProFormText width="md" name="name" disabled value={aname} />
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span> 员工部门：
              </td>
              <td>
                <ProFormText name="department" disabled value={department} />
              </td>
              <td>
                <span>*</span> 员工职位：
              </td>
              <td>
                <ProFormText
                  name="prodepartment"
                  disabled
                  value={prodepartment}
                />
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span>申请时间：
              </td>
              <td>
                <ProFormText name="applyTime" disabled value={applyTime} />
              </td>
              <td>
                <span>*</span> 开始时间：
              </td>
              <td>
                <ProFormDateTimePicker
                  name="date"
                  placeholder={''}
                  initialValue={startTime}
                  onChange={(e: any) => {
                    setStartTime(e._d);
                  }}
                />
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span>结束时间：
              </td>
              <td>
                <ProFormDateTimePicker
                  name="date"
                  placeholder={''}
                  initialValue={endTime}
                  onChange={(e: any) => {
                    setEndTime(e._d);
                  }}
                />
              </td>
              <td>
                <span>*</span> 加班时长：
              </td>
              <td>
                <ProFormText
                  name="timeday"
                  disabled
                  value={timeday}
                  onChange={(e: any) => {
                    setTimeday(e._d);
                  }}
                  placeholder={''}
                />
              </td>
            </tr>
            <tr>
              <td>备注：</td>
              <td colspan={5}>
                <input
                  type="text"
                  value={technological}
                  onChange={(e) => {
                    setTechnological(e.target.value);
                  }}
                />
              </td>
            </tr>
          </tbody>
        </table>
        <table className="table0">
          <tbody>
            <tr>
              <td colspan={9}>
                附件上传<button>批量上传</button>
              </td>
            </tr>
            <tr>
              <td>文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan={9}></td>
            </tr>
          </tbody>
        </table>
      </div>
      <Modal
        className="modalopen"
        title="提示对话框"
        open={isModalOpen}
        onCancel={ModalFalse}
        footer={null}
      >
        <div className="content">
          <span>i</span>
          <p>请输入{keyWord}</p>
          <button onClick={handleCancel}>确定</button>
        </div>
       
      </Modal>
    </div>
  );
}
